<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>移动端-轮播图</title>
  <style>
    *,
    ::before,
    ::after{
      padding: 0;
      margin: 0;
      -webkit-box-sizing: border-box;/*兼容移动端主流浏览器*/
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;/*清除移动端点击高亮效果*/
    }
    body{
      font-family:Microsoft YaHei,sans-serif;/*移动端默认的字体*/
      font-size: 14px;
      color: #333;
    }
    ol,ul{
      list-style: none;
    }
    /*清除浮动*/
    .clearfix::before,
    .clearfix::after{
      content: "";
      display: block;
      height: 0;
      line-height: 0;
      visibility: hidden;
      clear: both;
    }

    .layout{
      width: 100%;
      max-width: 750px;
      min-width: 320px;
      margin: 0 auto;
      position: relative;
    }
    .banner{
      width: 100%;
      overflow: hidden;
      position: relative;
    }
    .banner ul:first-child{
      width: 100%;
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
      white-space: nowrap;
      font-size: 0;
    }
    .banner ul:first-child li{
      width: 100%;
      display: inline-block;
    }
    .banner ul:first-child li a{
      display: block;
      width: 100%;
    }
    .banner ul:first-child li a img{
      width: 100%;
      display: block;
    }
    .banner ul:last-child{
      position: absolute;
      bottom: 6px;
      width: 100%;
      text-align: center;
    }
    .banner ul:last-child li{
      width: 6px;
      height: 6px;
      border: 1px solid #000;
      border-radius: 50%;
      display: inline-block;
      margin-left: 10px;
    }
    .banner ul:last-child li:first-child{
      margin-left: 0;
    }
    .banner ul:last-child li.now{
      background: red;
    }
  </style>
</head>
<body>
<div class="layout">
  <div class="banner">
    <ul class="clearfix">
      <li><a href="#"><img src="img/banner5.jpg"></a></li>
      <li><a href="#"><img src="img/banner1.jpg"></a></li>
      <li><a href="#"><img src="img/banner2.jpg"></a></li>
      <li><a href="#"><img src="img/banner3.jpg"></a></li>
      <li><a href="#"><img src="img/banner4.jpg"></a></li>
      <li><a href="#"><img src="img/banner5.jpg"></a></li>
      <li><a href="#"><img src="img/banner1.jpg"></a></li>
    </ul>
    <ul>
      <li class="now"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

<script>
  /**
   * Created by libo on 2017/11/9.
   */

  /*封装一些公用的事件或者公用的方法*/
  /*定义的一个命名空间*/
  window.my = {};
  /*封装一个事件 过渡结束事件*/
  my.transitionEnd = function(dom,callback){
    //1.给谁加事件
    //2.事件触发后处理什么业务
    if(!dom || typeof dom != 'object'){
      //没dom的时候或者不是一个对象的时候 程序停止
      return false;
    }
    dom.addEventListener('transitionEnd', function(){
      callback && callback();
    });
    dom.addEventListener('webkitTransitionEnd', function(){
      callback && callback();
    });
  };

  //封装一个tap事件
  my.tap = function(dom,callback){
    if(!dom || typeof dom != 'object'){
      //没dom的时候或者不是一个对象的时候 程序停止
      return false;
    }

    var isMove = false; //是否滑动过
    var time = 0;   //刚刚触摸屏幕的事件  touchstart的触发事件

    dom.addEventListener('touchstart',function(){
      //记录触发这个事件的时间
      time = Date.now();  //时间戳 毫秒
    });
    dom.addEventListener('touchmove',function(){
      isMove = true;
    });
    window.addEventListener('touchend',function(e){
      //1.没有滑动过
      //2.响应事件在150ms以内   要求比click要响应快
      if(!isMove && (Date.now()-time)<150 ){
        callback && callback(e);
      }

      //重置参数
      isMove = false;
      time = 0;
    });

  };




  /**
   * Created by libo on 2017/11/9.
   */
  window.onload = function(){
    /*
     * 1.自动轮播  定时器  无缝衔接  动画结束瞬间定位
     * 2.点需要随着轮播的滚动改变对应的点  改变当前样式  当前图片的索引
     * 3.手指滑动的时候让轮播图滑动   touch事件  记录坐标轴的改变 改变轮播图的定位（位移css3）
     * 4.当滑动的距离不超过一定的距离的时候  需要吸附回去  过渡的形式去做
     * 5.当滑动超过了一定的距离  需要 跳到 下一张或者上一张  （滑动的方向） 一定的距离（屏幕的三分之一）
     * */

    //轮播图大盒子
    var banner = document.querySelector('.banner');
    //图片的宽度
    var width = banner.offsetWidth;
    //图片盒子
    var imageBox = banner.querySelector('ul:first-child');
    //点盒子
    var pointBox = banner.querySelector('ul:last-child');
    //所有的点
    var points = pointBox.querySelectorAll('li');

    //公用方法
    //加过渡
    var addTransition = function(){
      imageBox.style.transition = "all 0.3s";
      imageBox.style.webkitTransition = "all 0.3s";/*做兼容*/
    };
    //清除过渡
    var removeTransition = function(){
      imageBox.style.transition = "none";
      imageBox.style.webkitTransition = "none";
    };
    //定位
    var setTranslateX = function(translateX){
      imageBox.style.transform = "translateX("+translateX+"px)";
      imageBox.style.webkitTransform = "translateX("+translateX+"px)";
    };

    //功能实现
    //自动轮播  定时器  无缝衔接  动画结束瞬间定位
    var index = 1;
    var timer = setInterval(function(){
      index++ ;   //自动轮播到下一张
      //改变定位  动画的形式去改变  transition transform translate
      addTransition();    //加过渡动画
      setTranslateX(-index * width);  //定位
    },2000);

    //等过渡结束之后来做无缝衔接
    my.transitionEnd(imageBox, function(){
      //处理事件结束后的业务逻辑
      if(index > 5 ){
        index = 1;
      }else if(index <= 0){
        index = 5;
      }
      removeTransition(); //清除过渡
      setTranslateX(-index * width);  //定位
      setPoint(); //设置底部显示当前图片对应的圆角
    });

    //改变当前样式  当前图片的索引
    var setPoint = function(){
      //清除上一次的now
      for(var i = 0 ; i < points.length ; i++){
        points[i].className = " ";
      }
      //给图片对应的点加上样式
      points[index-1].className = "now";
    };

    /*
     手指滑动的时候让轮播图滑动   touch事件  记录坐标轴的改变 改变轮播图的定位（位移css3）
     当滑动的距离不超过一定的距离的时候  需要吸附回去  过渡的形式去做
     当滑动超过了一定的距离  需要 跳到 下一张或者上一张  （滑动的方向） 一定的距离（屏幕的三分之一）
     */
    //touch事件
    var startX = 0; //记录起始  刚刚触摸的点的位置 x的坐标
    var moveX = 0;  //滑动的时候x的位置
    var distanceX = 0;  //滑动的距离
    var isMove = false; //是否滑动过

    imageBox.addEventListener('touchstart', function(e){
      clearInterval(timer);   //清除定时器
      startX = e.touches[0].clientX;  //记录起始X
    });

    imageBox.addEventListener('touchmove',function(e){
      moveX = e.touches[0].clientX;   //滑动时候的X
      distanceX = moveX - startX; //计算移动的距离
      console.log(distanceX);
      //计算当前定位  -index*width+distanceX
      removeTransition(); //清除过渡
      setTranslateX(-index * width + distanceX);  //实时的定位
      isMove = true;  //证明滑动过
    });

    //在模拟器上模拟的滑动会有问题 丢失的情况  最后在模拟器的时候用window
    window.addEventListener('touchend', function(e){
      // 滑动超过 1/3 即为滑动有效，否则即为无效，则吸附回去
      if(isMove && Math.abs(distanceX) > width/3){
        //5.当滑动超过了一定的距离  需要 跳到 下一张或者上一张  （滑动的方向）*/
        if(distanceX > 0){  //上一张
          index --;
        }
        else{   //下一张
          index ++;
        }
      }
      addTransition();    //加过渡动画
      setTranslateX(-index * width);    //定位

      //重置参数
      startX = 0;
      moveX = 0;
      distanceX = 0;
      isMove = false;
      //加定时器
      clearInterval(timer);   //严谨 再清除一次定时器
      timer= setInterval(function(){
        index++ ;  //自动轮播到下一张
        addTransition();    //加过渡动画
        setTranslateX(-index * width);    //定位
      },2000);
    });
  };
</script>
</body>
</html>
